{block name=head}
<style type="text/css">
</style>
{/block} {block name=body} {* Define the function *} {function name=render_product_list level=0 parenturl="" menu=0} {foreach $items as $item}
<div class="citem {$item.listing_name}">
    <a href="{$parenturl}/{$item.listing_url}/{$item.product_url}">
        <img src="{if $item.gallery.0.gallery_link neq ''}{$item.gallery.0.gallery_link}{else}/images/no-image-available.jpg{/if}" alt="{$item.gallery.0.gallery_caption}" title="{$item.gallery.0.gallery_title}" class="img-responsive">
        <div class="prodinfo">
            <div class="prodname">{$item.product_name}</div>
            {if $item.product_instock} {if $item.product_specialprice gt 0}
            <div class="prodprice">{$CURRENCY_SYMBOL}{$item.product_specialprice|number_format:2:'.':','}
                <div class="small">原价 ${$item.product_price|number_format:2:'.':','}</div>
            </div>
            <div class="special-banner small">特价</div>
            {else}
            <div class="prodprice">{$CURRENCY_SYMBOL}{$item.product_price|number_format:2:'.':','}
            </div>
            {/if} {else}
            <div class="special-banner">缺货</div>
            {/if}
        </div>
    </a>
</div>
{/foreach} {/function} {* Define the function *} {function name=render_category_list level=0 parenturl="" menu=0} {foreach $items as $item} {foreach $item.products as $product}
<div class="citem {$item.listing_name}">
    <a href="{$parenturl}/{$item.listing_url}/{$product.product_url}">
        <img src="{if $product.gallery.0.gallery_link neq ''}{$product.gallery.0.gallery_link}{else}/images/no-image-available.jpg{/if}" alt="{$product.gallery.0.gallery_caption}" title="{$product.gallery.0.gallery_title}" class="img-responsive">
        <div class="prodinfo">
            <div class="prodname">{$product.product_name}</div>
            {if $product.product_instock} {if $product.product_specialprice gt 0}
            <div class="prodprice">{$CURRENCY_SYMBOL}{$product.product_specialprice|number_format:2:'.':','}
                <div class="small">原价 ${$product.product_price|number_format:2:'.':','}</div>
            </div>
            <div class="special-banner small">特价</div>
            {else}
            <div class="prodprice">{$CURRENCY_SYMBOL}{$product.product_price|number_format:2:'.':','}
            </div>
            {/if} {else}
            <div class="special-banner">缺货</div>
            {/if}
        </div>
    </a>
</div>
{/foreach} {/foreach} {/function}
<div id="maincont">
    <div class="container">
        <div class="row">
            <div class="col-sm-12 visible-md visible-lg">
                {include file='breadcrumbs.tpl'}
            </div>
            {if count($data.listings) > 0}
            <div class="col-sm-12">
                <h1 class="title">{$listing_name}</h1>
                <!--<div id="subhead">{count($data.listings)} sub-categories found</div>-->
            </div>
            <div class="col-sm-12">
                <ul id="filters">
                    <li class="active" data-filter="*">所有</li>
                    <li data-filter=".Merchandise">商品</li>
                    <li data-filter=".Equipment">器材配件</li>
                    <li data-filter=".Other">其他</li>
                </ul>
            </div>
            <div class="col-sm-12" id="prodcontainer">
                {assign var='count' value=0} {call name=render_category_list items=$data.listings parenturl=$REQUEST_URI}
            </div>
            {else}
            <div class="col-sm-12">
                <h2 class="title">{$listing_name}</h2>
            </div>
            <div class="col-sm-12" id="prodcontainer">
                {assign var='count' value=0} {call name=render_product_list items=$data.products parenturl=$REQUEST_URI}
            </div>
            {/if}
        </div>
    </div>
</div>
{include file='helpblock.tpl'}
{/block}
{block name=tail}
<script type="text/javascript" src="/includes/js/isotope.pkgd.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
    var $container = $('#prodcontainer');
    // init
    $container.isotope({
        itemSelector: '.citem',
        layoutMode: 'fitRows'
    });

    $('#filters').on('click', 'li', function() {
        $("#filters").find("li").removeClass("active");
        var filterValue = $(this).attr('data-filter');
        $(this).addClass("active");
        $container.isotope({
            filter: filterValue
        });
    });
});
</script>
{/block}
